<template>
    <div class="base-info">
        <div class="user-info">
            <div class="left">
                <van-image
                    fit="cover"
                    round
                    :src="userInfo.photo"
                    class="avatar"
                />
                <span class="nickname">{{ userInfo.name }}</span>
            </div>
            <div class="right">
                <van-button
                    plain
                    type="primary"
                    hairline
                    round
                    class="editor-btn"
                    >编辑资料</van-button
                >
            </div>
        </div>
        <div class="data-status">
            <span class="data-item">
                <span class="count">{{ userInfo.art_count }}</span>
                <span class="text">头条</span>
            </span>
            <span class="data-item">
                <span class="count">{{ userInfo.follow_count }}</span>
                <span class="text">关注</span>
            </span>
            <span class="data-item">
                <span class="count">{{ userInfo.fans_count }}</span>
                <span class="text">粉丝</span>
            </span>
            <span class="data-item">
                <span class="count">{{ userInfo.like_count }}</span>
                <span class="text">获赞</span>
            </span>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
    computed: {
        ...mapState([
            'userInfo'
        ])
    }
};
</script>

<style lang="less" scoped>
.base-info {
    position: relative;
    height: 100%;
    padding: 0 35px;
    overflow: hidden;
    .user-info {
        flex: 1;
        display: flex;
        justify-content: space-between;
        margin-top: 116px;
        .left {
            display: flex;
            align-items: center;
            .avatar {
                width: 132px;
                height: 132px;
                margin-right: 23px;
                border: 2px solid #fff;
                box-sizing: border-box;
                &:hover {
                    box-shadow: 0 0 2px 2px #fff;
                }
            }
            .nickname {
                font-size: 30px;
                color: #fff;
                font-family: 'Microsoft Yahei';
            }
        }
        .right {
            .editor-btn {
                width: 116px;
                height: 33px;
                margin-top: 49px;
                padding: 0;
                padding-top: 1px;
                font-size: 20px;
                color: #666;
                outline: 0;
                border: 0;
            }
        }
    }
    .data-status {
        position: absolute;
        bottom: 0;
        left: 0;
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 126px;
        padding: 0 87px;
        box-sizing: border-box;
        .data-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 29px;
            color: #fff;
            .count {
                font-size: 36px;
                line-height: 36px;
            }
            .text {
                margin-top: 15px;
                font-size: 23px;
                line-height: 23px;
            }
        }
    }
}
</style>
